<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .tips {
            line-height: 40px;
            font-size: 14px;
            text-indent: 10px;
        }
    </style>
</head>

<body>
    <div class="tips">
        距离七夕还有xx天xx时xx分xx秒
    </div>
</body>
<script>
    // 距离七夕还有xx天xx时xx分xx秒 => 倒计时  

    // => 当前时间 距离 结束时间 => 差值 计算
    // 差值 > 0   =>  结束时间 > 当前时间
    // 差值 = 0   =>  结束时间 = 当前时间
    // 差值 < 0   =>  结束时间 < 当前时间

    var tips = document.getElementsByClassName("tips")[0];



    var future = new Date("2022-8-4");
    var now = new Date();  // 2022/7/28

    // var time = future.getTime() - now.getTime();
    var time = future - now;
    console.log(time);  // ms

    time = parseInt(time / 1000);
    console.log(time);  //s


    if (time > 0) {
        // 天   
        // 总的时间 / 一天的时间 => 天的倍数(几天)
        var day = parseInt(time / (60 * 60 * 24));
        console.log(day);

        // var hour = parseInt((time - day * (60 * 60 * 24)) / (60 * 60))
        // console.log(hour);

        // 总的时间 % 一天的时间 => 不满一天的时间(时分秒)
        // 不满一天的时间 / 一小时 => 小时的倍数
        var hour = parseInt(time % (60 * 60 * 24) / (60 * 60))
        console.log(hour);

        var minute = parseInt(time % (60 * 60) / 60)
        console.log(minute);

        var second = time % 60;
        console.log(second);

        tips.innerText = `距离七夕还有${day}天${hour}时${minute}分${second}秒`;


    } else {

    }












</script>

</html>